<template>
    <!-- {{ teamMsg }} -->
    <!-- <el-card> -->
    <div class="titles">我管理的团队详情</div>
    <p class="mu-small-title">团队信息</p>
    <el-form :model="teamMsg">

        <!-- teamMsg.value.tagIds = res.data.tagIds
        teamMsg.value.organizationId = res.data.organizationId
        teamMsg.value.memberIds  -->
        <div class="teamMsgInput" style="display: flex; justify-content: space-between; align-items: center;">
            <el-form-item label="团队编号"> <span style="margin-bottom: 6px;">{{ teamMsg?._id }}</span></el-form-item>
            <el-form-item label="团队名称"><span style="margin-bottom: 6px;">{{ teamMsg?.name }}</span></el-form-item>
            <el-form-item label="团队头像">
                <el-image :src="teamMsg.avatar" style="width: 40px;height: 40px;">
                </el-image>
            </el-form-item>
            <!-- <el-form-item label="团队标签">
                <template v-for="item in teamMsg.tagIds">
                    <div style="display: flex;"><span style="margin-bottom: 6px;margin-right: 10px;">
                            <el-tag>{{ item.name }}</el-tag>
                        </span>
                    </div>
                </template>
</el-form-item> -->
            <!-- </div>

        <div class="teamMsgInput"> -->


            <el-form-item label="机构地址">
                {{ teamMsg.organizationId?.address }}
            </el-form-item>
            <el-form-item label="签约人数">
                {{ teamMsg.signNumber }}
            </el-form-item>
            <!-- <el-form-item label="创建时间">
                {{ teamMsg.leaderId?.roleId?.createTime }}
            </el-form-item> -->


            <!-- <el-form-item label="创建人">
                {{ teamMsg.organizationId?.contacts }}
            </el-form-item> -->
        </div>
        <!-- <el-form-item label="团队状态">
            <el-switch v-model="teamMsg.state" inline-prompt :active-value="1" :inactive-value="0" active-text="启用"
                inactive-text="关闭"> </el-switch>
        </el-form-item> -->
        <p class="mu-small-title"> 团队成员</p>
        <div class="add-service-package-container">
            <el-card class="teamBox">
                <img :src="teamMsg.leaderId?.avatar" class="teamImg">
                <div class="info" style="margin-left: 100px;">
                    <p class="name">{{ teamMsg.leaderId?.name }}</p>
                    <p style="color: #999; font-size: 12px; margin: 10px 0;">{{ teamMsg.leaderId?.roleId.name }}</p>
                    <p style="color: #999; font-size: 12px;">签约人数：{{ teamMsg.leaderId?.signNumber }}</p>
                </div>
                <el-button style="position: absolute; top: 135px; right: 20px;"
                    @click="doctorRef?.openDrawer(teamMsg.leaderId?._id)">
                    医师详情
                </el-button>
                <span
                    style="position: absolute; top: 95px; left: 26px; background-color: #FDDB78; border-radius: 6px; color: #fff; font-size: 12px; padding: 1px 8px;">
                    团队长
                </span>
            </el-card>
            <el-card class="teamBox" v-for="item in teamMsg.memberIds" :key="item._id">
                <img :src="item.avatar" class="teamImg">
                <div class="info" style="margin-left: 100px;">
                    <p class="name">{{ item.name }}</p>
                    <p style="color: #999; font-size: 12px; margin: 10px 0;">{{ item.roleId.name }}</p>
                    <p style="color: #999; font-size: 12px;">签约人数：{{ item.signNumber }}</p>
                </div>
                <el-button style="position: absolute; top: 135px; right: 20px;"
                    @click="doctorRef?.openDrawer(item._id)">
                    医师详情
                </el-button>
            </el-card>
        </div>

        <P class="mu-small-title">服务包</P>
        <div class="add-service-package-container">
            <el-card class="teamBox" v-for="item in teamMsg.servicePackIds" :key="item._id">
                <img :src="item.image" class="teamImg">
                <div class="info" style="margin-left: 100px;">
                    <p class="name">{{ item.name }}</p>
                    <p style="color: #999; font-size: 12px; margin: 10px 0;">使用人群：{{ item.client }}</p>
                    <p style="color: #999; font-size: 12px; color: purple;">服务包类型：{{ item.type }}</p>
                </div>
                <el-button style="position: absolute; top: 135px; right: 20px;"
                    @click="packRef.openWin(item, item._id)">
                    服务包详情
                </el-button>
            </el-card>
        </div>

        <P class="mu-small-title" v-show="applyDate.length">加入团队申请</P>
        <div class="add-service-package-container">
            <el-card class="teamBox" v-for="item in applyDate" :key="item._id">
                <img :src="item.applicantId?.avatar" class="teamImg">
                <div class="info" style="margin-left: 100px;">
                    <p class="name">{{ item.applicantId?.name }}</p>
                    <p style="color: #999; font-size: 12px; margin: 10px 0;">{{ item.applicantId?.roleId?.name }}</p>
                    <p style="color: #999; font-size: 12px;">签约人数：{{ item.applicantId?.signNumber }}</p>
                </div>
                <el-button style="position: absolute; top: 135px; right: 200px;" type="success"
                    @click="updateApplyTeam(item._id, 2)">
                    通过
                </el-button>
                <el-button style="position: absolute; top: 135px; right: 125px;" type="danger"
                    @click="updateApplyTeam(item._id, 0)">
                    拒绝
                </el-button>
                <el-button style="position: absolute; top: 135px; right: 20px;"
                    @click="doctorRef?.openDrawer(item._id)">
                    医师详情
                </el-button>
            </el-card>
        </div>


        <div style="float: left;margin-top: 20px;margin-bottom: 40px;">
            <el-button type="primary" @click="editorRef.openEditor()">编辑团队信息</el-button>
            <el-button type="danger" @click="handleDissolveTeam">解散队伍</el-button>
            <el-button @click="handleGoBack">返回</el-button>
        </div>
    </el-form>

    <!-- </el-card> -->
    <!-- 医生详情（抽屉） -->
    <DoctorDetail ref="doctorRef"></DoctorDetail>
    <!-- 服务包（抽屉） -->
    <ServicePack ref="packRef"></ServicePack>
    <!-- 编辑团队信息（弹窗） -->
    <EditorTeamMsg ref="editorRef" :teamMsg="teamMsg" @refresh="handleRefresh"></EditorTeamMsg>

</template>

<script setup>
import { inject, onMounted, ref, useTemplateRef } from 'vue';
import DoctorDetail from './DoctorDetail.vue';
import ServicePack from './ServicePack.vue';
import EditorTeamMsg from './EditorTeamMsg.vue';
import { useRoute, useRouter } from 'vue-router';
import { useGlobalStore } from '@/store/global';
import { useFindData } from '@/composables/findData';
import { deleteTeam, getApplyTeamApi, searchTeam, updateApplyTeamApi } from '@/api/team';

// defineProps(['teamMsg'])
const doctorRef = useTemplateRef('doctorRef')
const packRef = useTemplateRef('packRef')
const editorRef = useTemplateRef('editorRef')

const { teamMsg, accTeamDetail } = useFindData();
const route = useRoute();
const router = useRouter();

const applyDate = ref([]);

onMounted(() => {
    accTeamDetail(route.params._id);
    // 获取入队申请数据
    getApplyTeam(route.params._id);
})


console.log(route.params._id);

// 返回功能
function handleGoBack() {
    router.push('/data/team/list');
}

// 解散队伍功能
function handleDissolveTeam() {
    ElMessageBox.confirm(
        '确定要解散这个团队吗？解散后无法恢复！',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        try {
            await deleteTeam({ _id: teamMsg.value._id });
            ElMessage({
                type: 'success',
                message: '解散成功',
            });
            // 解散成功后返回团队列表
            router.push('/data/team/list');
        } catch (error) {
            ElMessage({
                type: 'error',
                message: '解散失败，请重试',
            });
        }
    }).catch(() => {
        // 点击【取消】按钮
    });
}

// 刷新团队详情
function handleRefresh() {
    accTeamDetail(route.params._id);
}

// 处理入队申请
// 要修改的状态值（0-已拒绝 1-待审核  2-已通过）
async function updateApplyTeam(_id, state) {
    const res = await updateApplyTeamApi({
        _id,
        state
    })
    if (res.code == 200) {
        ElMessage.success('已通过');
        accTeamDetail(route.params._id);
        getApplyTeam(route.params._id);
    } else {
        ElMessage.error(res.message)
    }
}

// 获取入队申请
async function getApplyTeam(teamId) {
    const res = await getApplyTeamApi({
        teamId
    })
    if (res.code == 200) {
        applyDate.value = res.data.filter(item => item.state == 1);
    } else {
        console.log(res);
    }
}







</script>

<style scoped lang="scss">
.add-service-package-container {
    display: grid;
    grid-template-columns: repeat(4, 390px);
    justify-content: space-between;
}

.teamBox {
    width: 340px;
    height: 183px;
    /* color: #e4e7ed; */
    position: relative;
    // margin-top: 20px;
}

.pack {
    text-align: left;
    float: top;
    /* position: absolute; */
    /* top: 10px; */
}

.teamMsgInput {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

}

.serviceImg {
    float: left;
    border-radius: 10px;
    width: 123px;
    height: 88px;
    margin-right: 20px;
}
</style>